<template>
  <div class="left-top">
    <div class="title">
      <div class="title-left">充值金额汇总</div>
      <div class="title-right">{{ rechargeData.total_amount }}</div>
    </div>
    <div class="table">
      <span>充值时间</span>
      <span>充值账户</span>
      <span>充值金额</span>
      <span>实际更新进度</span>
    </div>
    <div class="table-two" ref="tableColumn">
      <div
        class="table-column"
        v-for="(item, index) in rechargeData.list"
        :key="index"
      >
        <span>{{ item.month }}</span>
        <span class="color overflow" :title="item.acount">{{
          item.acount
        }}</span>
        <span>{{ item.amount }}</span>
        <span class="color">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rechargeData: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    setInterval(() => {
      const scrollTop = this.$refs.tableColumn.scrollTop;
      const scrollHeight = this.$refs.tableColumn.scrollHeight;
      const clientHeight = this.$refs.tableColumn.clientHeight;

      if (clientHeight >= scrollHeight - scrollTop) {
        this.$refs.tableColumn.scrollTop = 0;
      } else {
        this.$refs.tableColumn.scrollTop += 1;
      }
    }, 50);
  },
};
</script>

<style scoped lang="less">
.left-top {
  margin: 0 12px;
  overflow: hidden;
  height: 100%;
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin: 16px 20px 14px;
    .title-left {
    }
    .title-right {
      font-weight: bold;
    }
  }
  .table {
    display: flex;
    background: rgba(177, 219, 255, 0.5);
    padding: 8px 0;
    span {
      font-size: 14px;
      flex: 1;
      text-align: center;
    }
  }
  .table-two {
    height: calc(100% - 100px);
    overflow: hidden; //auto
    .table-column {
      display: flex;
      padding: 6px 0;
      margin: 8px 0;
      font-size: 14px;
      //background: rgba(177, 219, 255, 0.5);
      &:nth-of-type(2n){
        background: rgba(177, 219, 255, 0.5);
      }
      span {
        flex: 1;
        text-align: center;
      }
      .color {
        color: #1ec4ff;
      }
      .overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .table-column:last-child {
      //margin: 8px 0 0 0;
    }
  }
}
</style>
